<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-10-21 16:27:37
 * @LastEditors: tc
 * @LastEditTime: 2022-03-10 17:08:12
-->
<template>
    <div class="middlebox">
        <div class="dengji-box">
            <div class="input-Calendar">
                <el-input
                    v-model="searchReservoir"
                    placeholder="请输入搜索水库名称"
                    :prefix-icon="'el-icon-search'"
                    @change="onSearchReservoir"
                />
            </div>
            <div class="charts" id="charts" ref="circle"></div>
        </div>
    </div>
</template>

<script>
import huJson from '@/assets/data/hunan.json'
import {imgzhong} from './img.js'
export default {
    props: {
        data: {
            default: () => {}
        },
    },
    data() {
        return {
            charts:null,
            nowTimer:null,
            searchReservoir:'',
            geoCoordMap:{
                湘西土家族苗族自治州: [109.737428,28.612592],
                怀化市: [110.001598,27.329813],
                张家界市: [110.478887,29.497343],
                常德市: [111.69905,29.331446],
                岳阳市: [113.128922,28.95648],
                益阳市: [112.055994,28.454853],
                湘潭市: [112.745439,27.53136],
                株洲市: [113.232783,27.728862],
                郴州市: [113.015517,26.030117],
                永州市: [111.613482,26.219861],
                邵阳市: [111.267855,27.039528],
                娄底市: [111.994468,27.499838],
                衡阳市: [112.572016,27.14216],
                长沙市: [112.604483,28.158327],
            }
        }
    },
    watch: {
        data: {
            handler(val) {
                this.init()
            },
            deep:true
        },
    },
    mounted() {
    },
    unmounted() {
        this.charts.dispose()
    },
    methods: {
       init() {
            const that = this
            let myCharts = null
            that.$echarts.registerMap('湖南省', huJson, {})
            myCharts = that.$echarts.init(that.$refs.circle)
            that.charts = myCharts
            // that.renderData(this.data)
            // myCharts.off('click')
            // myCharts.on('click', params => {
            //     console.log(params)
            //     // that.$emit('onRiskeve', params.data.type)
            // })
            myCharts.setOption(that.setOption())
            that.getNowTime()
            window.addEventListener('resize', function() {
                myCharts.resize()
            })
        },
        onSearchReservoir(val){
            let that = this
            if(val == ''){
                that.getNowTime()
            }else {
                clearInterval(that.nowTimer)
                let xzIndex = 0
                for (let index = 0; index < that.data.allreservoirData.length; index++) {
                     if(that.data.allreservoirData[index].reservoirName.indexOf(val) != '-1'){
                         xzIndex = index
                         break
                     }
                }
                that.charts.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 1,
                    dataIndex: xzIndex,
                })
                that.$emit('onState', that.data.allreservoirData[xzIndex])
            }
        },
        // 动态计算柱形图的高度（定一个max）
        lineMaxHeight() {
            const maxValue = Math.max(...this.data.provincialData.map((item) => item.counts));
            return 0.05 / maxValue;
        },
        // 柱状体的主干
        lineData() {
            return this.data.provincialData.map((item) => {
                return {
                    name: item.city,
                    value: item.counts,
                    coords: [
                        this.geoCoordMap[item.city],
                        [this.geoCoordMap[item.city][0], this.geoCoordMap[item.city][1] + item.counts * this.lineMaxHeight()],
                    ],
                };
            });
        },
        scatterData () {
            return this.data.allreservoirData.map((item) => {
                return {
                    name: item.reservoirName,
                    value: [item.lon,item.lat],
                    zdy:item,
                }
            })
        },
        setOption() {
            const that =this
            let option = {
                tooltip: {
                    // borderWidth: 0,
                    trigger: 'item',
                    alwaysShowContent:true,
                    transitionDuration:1,
                    // show: true,
                    // enterable: true,
                    // textStyle:{
                    //     fontSize:20,
                    //     color: '#fff'
                    // },
                    // backgroundColor: 'rgba(0,2,89,0.8)',
                    // formatter: '{b}<br />{c}'
                },
                geo: [
                    {
                        label: {
                            show: true,
                            color: '#fff',
                            fontSize: 14
                        },
                        zoom: 1,
                        aspectScale: '1',
                        layoutSize: '95%',
                        layoutCenter:['50%','50%'],
                        map: '湖南省',
                        roam: false, // 是否允许缩放
                        itemStyle: {
                            borderWidth: 2, //设置外层边框
                            borderColor:'#abe1ff',
                            areaColor: {
                                image: imgzhong, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                                repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                            },
                            opacity: 1,
                        },
                        silent: true,
                        zlevel: 2
                    },
                    {
                        zoom: 1,
                        aspectScale: '1',
                        layoutSize: '95%',
                        layoutCenter:['52%','52%'],
                        map: '湖南省',
                        roam: false, // 是否允许缩放
                        itemStyle: {
                            borderWidth: 2, //设置外层边框
                            borderColor:'#00c0ff',
                            areaColor:'#0053ba',
                            opacity: 0.6,
                        },
                        silent: true,
                        zlevel: 1
                    },
                ],
                series:[
                    // 柱状体的主干
                    {
                    type: 'lines',
                    coordinateSystem:'geo',
                    zlevel: 3,
                    effect: {
                        show: false,
                        // period: 4, //箭头指向速度，值越小速度越快
                        // trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                        // symbol: 'arrow', //箭头图标
                        // symbol: imgDatUrl,
                        symbolSize: 5, // 图标大小
                    },
                    lineStyle: {
                        width: 6, // 尾迹线条宽度
                        color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0, 255, 150, 1)', // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(3, 190, 252, 0)', // 100% 处的颜色
                        }]),
                        cap: 'round',
                        opacity: 1, // 尾迹线条透明度
                        curveness: 0, // 尾迹线条曲直度
                    },
                    label: {
                        show: true,
                        padding:[0,0,-22,40],
                        formatter: function (params) {
                            return ['{img|' + params.value + '}'];
                        },
                        rich: {
                            img: {
                                backgroundColor:'rgba(0, 46, 152, 0.7)',
                                borderColor:'rgba(255, 255, 255, 0.4)',
                                padding:[5,10],
                                borderRadius:2,
                                color: '#fff',
                                fontSize: 14,
                                fontWeight: 600,
                            },
                        },
                    },
                    silent: true,
                    data: this.lineData(),
                    },
                    {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    zlevel: 5,
                    silent: true,
                    tooltip:{
                        // position: [10, 10],
                        backgroundColor:'rgba(255, 255, 255, 0)',
                        borderColor:'rgba(255, 255, 255, 0)',
                        formatter: function (params) {
                            return `<div class='tishikuan'>
                                <div>
                                    <div>${params.data.zdy.reservoirName}</div>
                                    <div>${params.data.zdy.typeName}</div>
                                </div>
                                <div>
                                    <div><img src="${require('@/assets/img/dashboard/地址.png')}" alt=""></div>
                                    <div>${params.data.zdy.address}</div>
                                </div>
                                <div>
                                    <span class="light"></span><span class="light"></span><span class="light"></span><span class="light"></span>
                                </div>
                            </div>`;
                        },
                    },
                    data: that.scatterData()
                    }
                ]
            }
            return option
        },
        getNowTime() {
            let that = this
            that.charts.dispatchAction({
                type: 'showTip',
                seriesIndex: 1,
                dataIndex: 0,
            })
            that.$emit('onState', that.data.allreservoirData[0])
            clearInterval(that.nowTimer);
            let dataIndex = that.data.allreservoirData.length
            let index = 1
            that.nowTimer = setInterval(() => {
                that.charts.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 1,
                    dataIndex: index,
                })
                that.$emit('onState', that.data.allreservoirData[index])
                index++
                if(index == dataIndex){
                    index = 0 
                }
            }, 1000 * 60 * 3)
        }
    }
}
</script>

<style lang="scss" scoped>
.middlebox {
    height: 100%;
    box-sizing: border-box;
    .dengji-box {
        .input-Calendar {
            position: absolute;
            left: 50%;
            top: -10px;
            transform: translate(-50%,-50%);
            width: 360px;
            z-index: 5;
            ::v-deep .el-input__inner {
                color: #fff;
                border : 0px solid #DCDFE6;
                height: 40px;
                background-color: rgba($color: #2D5591, $alpha: 0.7);
            }
            ::v-deep .el-input--small {
                font-size: 18px;
            }
            ::v-deep .el-input--small .el-input__icon {
                line-height: 40px;
            }
        }
        position: relative;
        width: 100%;
        box-sizing: border-box;
        height:100%;
        .charts {
            height: 100%;
            // border: 1px solid white;
        }
    }
}
</style>
<style>
.tishikuan {
    position: absolute;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    width: 250px;
    height: auto;
    color: #fff;
    top: 0px;
    left: 0px;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(0, 33, 108, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 2px;
}
.tishikuan>div {
    width: 100%;
    display: flex;
}
.tishikuan>div:nth-child(1) {
    justify-content: space-between;
    margin-bottom: 10px;
}
.tishikuan>div:nth-child(1)>div:nth-child(1) {
    font-size: 18px;
}
.tishikuan>div:nth-child(1)>div:nth-child(2) {
    font-size: 12px;
    color: #FF9600;
    background: rgba(0, 46, 152, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    padding: 0 10px;
    letter-spacing: 2px;
}
.tishikuan>div:nth-child(2) {
    width: 100%;
    display: flex;
}
.tishikuan>div:nth-child(2)>div:nth-child(1) {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    flex-shrink: 0;
}
.tishikuan>div:nth-child(2)>div:nth-child(2) {
    white-space: break-spaces;
    letter-spacing: 2px;
}
.light {
    position: absolute;
    display: block;
}
.light:nth-child(1) {
    filter: hue-rotate(0deg);
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #3a86ff);
    animation: animate1 4s linear infinite;
}

@keyframes animate1 {
    0% {
    left: -100%;
    }

    50%,
    100% {
    left: 100%;
    }
}
.light:nth-child(2) {
    filter: hue-rotate(60deg);
    top: -100%;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #3a86ff);
    animation: animate2 4s linear infinite;
    animation-delay: 1s;
}

@keyframes animate2 {
    0% {
    top: -100%;
    }

    50%,
    100% {
    top: 100%;
    }
}
.light:nth-child(3) {
    filter: hue-rotate(120deg);
    bottom: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(270deg, transparent, #3a86ff);
    animation: animate3 4s linear infinite;
    animation-delay: 2s;
}

@keyframes animate3 {
    0% {
    right: -100%;
    height: 3px;
    }

    50%,
    100% {
    height: 2px;
    right: 100%;
    }
}
.light:nth-child(4) {
    filter: hue-rotate(300deg);
    bottom: -100%;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #3a86ff);
    animation: animate4 4s linear infinite;
    animation-delay: 3s;
}

@keyframes animate4 {
    0% {
    bottom: -100%;
    }

    50%,
    100% {
    bottom: 100%;
    }
}
</style>